<!--
 * @Author: your name
 * @Date: 2020-02-17 10:19:09
 * @LastEditTime: 2020-08-22 11:27:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \boot_vue\src\views\main-sidebar-sub-menu.vue
 -->
<template>
  <el-submenu v-if="menu.children && menu.children.length >= 1"
              :index="menu.id"
              :popper-append-to-body="false">
    <template slot="title">
      <svg class="icon-svg aui-sidebar__menu-icon"
           aria-hidden="true">
        <use :xlink:href="`#${menu.icon}`"></use>
      </svg>
      <span>{{ menu.name }}</span>
    </template>
    <div :class="{'aui-sidebar--dark':$store.state.sidebarFold}">
      <sub-menu v-for="item in menu.children"
                :key="item.id"
                :menu="item"></sub-menu>
    </div>
  </el-submenu>
  <el-menu-item v-else
                :index="menu.id"
                @click="gotoRouteHandle(menu)">
    <svg class="icon-svg aui-sidebar__menu-icon"
         aria-hidden="true">
      <use :xlink:href="`#${menu.icon}`"></use>
    </svg>
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>

<script>
import SubMenu from './main-sidebar-sub-menu'
export default {
  name: 'sub-menu',
  inject: ['refresh'],
  props: {
    menu: {
      type: Object,
      required: true
    }
  },
  components: {
    SubMenu
  },
  // watch: {
  //   // 利用watch方法检测路由变化：
  //   '$route': function (to, from) {
  //     // 拿到目标参数 to.query.id 去再次请求数据接口
  //     if (to.path === '/picture') {
  //       let img = this.menu.imgAddress
  //       this.$router.push({ path: '/picture', query: { img: img } })
  //     }
  //   },
  //   loop: true
  // },
  methods: {
    // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
    gotoRouteHandle (menu) {
      localStorage.removeItem('img')
      localStorage.removeItem('menuId')
      // localStorage.removeItem('http')
      // localStorage.removeItem('singleSign')
      if (menu.httpAddress !== '' && menu.httpAddress !== null) {
        // let http = menu.httpAddress + menu.urlParam
        // localStorage['http'] = http
        // localStorage['singleSign'] = menu.singleSign
        localStorage['menuId'] = menu.id
        // window.open(http)
        // this.$router.push({ path: '/external-link', query: { http: http, singleSign: menu.singleSign } })
        this.$router.push({ path: '/external-link', query: { menuId: menu.id } })
      }
      if (menu.imgAddress !== '' && menu.imgAddress !== null) {
        let img = menu.imgAddress
        localStorage['img'] = img
        // this.$router.push({ name: 'picture', params: { img: img } })
        this.$router.push({ path: '/picture', query: { img: img } })
      }
      const menuId = menu.id
      let route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
      if (route) {
        this.$router.push({ name: route.name })
      }
      this.refresh()
    }
  }
}
</script>
